<template>
  <div class="fixed-table-table" style="height: {tableHeight}; ">
    <el-table
      ref="pageableTable"
      v-loading="loading"
      :data="data"
      :sortable="sortable"
      :border="border"
      :size="size"
      :height="tableHeight"
      :max-height="tableHeight"
      v-bind="$attrs"
      style="width: 100%;"
      highlight-current-row
      v-on="$listeners"
      @selection-change="onSelectionChange"
      @sort-change="onSortChange"
    >
      <!-- @row-click="onRowClick" -->
      <el-table-column v-if="multipleSelected" type="selection" />
      <slot />
    </el-table>
    <pagination v-if="!disablePageable" :total="total" :page.sync="currentPage" :limit.sync="limit" @pagination="onPaginationChange" />
  </div>
</template>

<script>
import Pagination from '@neu/biz-core/components/Pagination'

/*
  使用该组件业务组件，需要混入databind，达到封装的目的
*/
export default {
  name: 'PageableTable',
  components: {
    Pagination
  },
  props: {
    loading: {
      type: Boolean,
      default: true
    },
    border: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'mini'
    },
    data: {
      type: Array,
      default: function() {
        return []
      }
    },
    sortable: {
      type: String,
      default: 'custom'
    },
    total: {
      required: false,
      type: Number,
      default: 0
    },
    page: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 20
    },
    multipleSelected: {
      type: Boolean,
      default: false
    },
    tableHeight: {
      type: Number,
      default: 0
    },
    disablePageable: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selectionRows: []
    }
  },
  computed: {
    currentPage: {
      get() {
        return this.page
      },
      set(val) {
        this.$emit('update:page', val)
      }
    },
    limit: {
      get() {
        return this.pageSize
      },
      set(val) {
        this.$emit('update:pageSize', val)
      }
    }
  },
  mounted() {
    addEventListener('keydown', this.keyDown, false)
    addEventListener('keyup', this.keyUp, false)
  },
  beforeDestroy() {
    // 解绑
    removeEventListener('keydown', this.keyDown)
    removeEventListener('keyup', this.keyUp)
  },
  methods: {
    getEleTable() {
      return this.$refs.pageableTable
    },
    onPaginationChange(pageObj) {
      this.$emit('page-change', pageObj)
    },
    onSortChange(sortObj) {
      this.$emit('sort-change', sortObj)
    },
    onSelectionChange(val) {
      this.$emit('selection-change', val)
      this.selectionRows = val
    },
    onRowClick(row, column, event) {
      const table = this.$refs.pageableTable
      if (this.CtrlDown) {
        table.toggleRowSelection(row) // ctrl多选 如果点击两次同样会取消选中
        return
      }
      const findRow = this.selectionRows.find(c => c.id === row.id)
      if (findRow) {
        table.toggleRowSelection(row, false)
        return
      }
      table.clearSelection()
      table.toggleRowSelection(row) // 调用选中行方法
    },
    keyDown(event) {
      const key = event.keyCode
      if (key === 17) {
        this.CtrlDown = true
      }
    },
    keyUp(event) {
      const key = event.keyCode
      if (key === 17) {
        this.CtrlDown = false
      }
    }
  }
}
</script>
